<template>
  <div class="echarts-chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    // 获取容器元素
    var chartDom = this.$el;
    // 初始化 ECharts 实例
    var myChart = echarts.init(chartDom);
    // 生成随机数据
    var data = generateData();
    // 设置选项
    var option = {
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['交流功率', '辐射强度']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.xAxisData
      },
      yAxis: {
        type: 'value',
        min: 0, // 设置最小值为0
        max: 500, // 设置最大值为500
        interval: 100 // 设置刻度间隔为100
      },
      series: [
        {
          name: '交流功率',
          type: 'line',
          stack: 'Total',
          smooth: true,
          symbol: 'none', // 去除小圆点
          lineStyle: {
            color: 'lightgreen' // 设置曲线颜色为淡绿色
          },
          itemStyle: {
            color: 'lightgreen' // 设置图表元素颜色为淡绿色
          },
          data: data.seriesData1
        },
        {
          name: '辐射强度',
          type: 'line',
          stack: 'Total',
          smooth: true,
          symbol: 'none', // 去除小圆点
          lineStyle: {
            color: 'yellow' // 设置曲线颜色为黄色
          },
          itemStyle: {
            color: 'yellow' // 设置图表元素颜色为黄色
          },
          data: data.seriesData2
        }
      ]
    };
    // 设置图表选项
    myChart.setOption(option);
  }
};

// 生成随机数据函数
function generateData() {
  var xAxisData = [];
  var seriesData1 = [];
  var seriesData2 = [];
  // 从6点开始，每隔75分钟生成一个时间点，直到21点
  var startTime = new Date(2024, 3, 30, 6, 0);
  var endTime = new Date(2024, 3, 30, 21, 0);
  var currentTime = new Date(startTime);
  while (currentTime <= endTime) {
    var timeString = currentTime.getHours() + ':' + (currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime.getMinutes());
    xAxisData.push(timeString);
    seriesData1.push(randomData());
    seriesData2.push(randomData());
    // 加75分钟
    currentTime.setMinutes(currentTime.getMinutes() + 75);
  }
  return {
    xAxisData: xAxisData,
    seriesData1: seriesData1,
    seriesData2: seriesData2
  };
}

// 生成随机数据函数
function randomData() {
  return Math.floor(Math.random() * 501); // 0-500之间的随机整数
}
</script>

<style scoped>
.echarts-chart {
  width: 100%;
  height: 200px;
  margin-left: 180px; /* 向右偏移 50px */
  margin-top: 50px; /* 向下偏移 10px */
}
</style>
